<template>
  <header>
    <div class="container navbar">
      <div class="logo">
        <i class="fas fa-mountain"></i>
        <span>福州印象</span>
      </div>
      <nav-links :links="navLinks"></nav-links>
      <user-profile class="user-profile-container" :user="user" @login="$emit('login')" @logout="$emit('logout')" @view-orders="$emit('view-orders')" @view-profile="$emit('view-profile')">
      </user-profile>
    </div>
  </header>
</template>

<script>
import { useRouter } from 'vue-router'
import NavLinks from './NavLinks.vue'
import UserProfile from './UserProfile.vue'

export default {
  name: 'AppHeader',
  components: {
    NavLinks,
    UserProfile
  },
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  setup() {
    const router = useRouter()
    
    const navLinks = [
      { text: '首页', path: '/' },
      { text: '地方文化', path: '/history' },
      { text: '景点预约', path: '/site' },
      { text: '美食', path: '/food' },
      { text: '留言板', path: '/message' },
      
    ]
    
    return {
      router,
      navLinks
    }
  },
  emits: ['login', 'logout', 'view-orders', 'view-profile']
}</script>

<style scoped>
header {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 20px;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: bold;
  position: absolute;
  left: 20px;
}

.logo i {
  margin-right: 10px;
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    padding: 15px 0;
  }
  
  .logo {
    position: static;
    margin-bottom: 15px;
  }
}
  .user-profile-container {
    position: absolute;
    right: 20px;
  }
</style>